<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading">
			<template #icon>
				<loader></loader>
			</template>
		</e-loading-page>
		<view class="tab e-flex-xy-center bg-white">
			<view class="text-center e-rela e-flex-1 fw-600" @tap="setTabIndex(0)" :class="{ 'tab-active': tabIndex == 0 }">
				{{ $t('common.全部') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="setTabIndex(1)" :class="{ 'tab-active': tabIndex == 1 }">
				{{ $t('common.待使用') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="setTabIndex(2)" :class="{ 'tab-active': tabIndex == 2 }">
				{{ $t('common.已使用') }}
			</view>
			<view class="text-center e-rela e-flex-1 fw-600" @tap="setTabIndex(3)" :class="{ 'tab-active': tabIndex == 3 }">
				{{ $t('common.已过期') }}
			</view>
		</view>
		<swiper class="swiper" :current="tabIndex" @change="(e) => setTabIndex(e.detail.current)">
			<swiper-item v-for="(item, index) in cartList" :key="index">
				<scroll-view class="e-p-20" scroll-y @scrolltolower="getData(index)" lower-threshold="60">
					<cart-item :info="items" v-for="items in item.list" :key="items.id" />
					<empty :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')" v-if="item.isEmpty"></empty>
					<load-more v-else :showLoad="item.showLoad"></load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive,watch } from 'vue';
import { useCurrentInstance, useQueryPage } from '@/common/hooks';
import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { getUserTimeCardList } from '@/common/request/api';
import cartItem from './child/item.vue';
const ctx = useCurrentInstance();

const cartList = reactive([
	useQueryPage({
		api: getUserTimeCardList,
		option: {
			responseKey:'data',
			totalKey:'total',
			params: {
				status: 0
			}
		},
		pageSize: 10
	}),
	useQueryPage({
		api: getUserTimeCardList,
		option: {
			responseKey:'data',
			totalKey:'total',
			params: {
				status: 3
			}
		},
		pageSize: 10
	}),
	useQueryPage({
		api: getUserTimeCardList,
		option: {
			responseKey:'data',
			totalKey:'total',
			params: {
				status: 2
			}
		},
		pageSize: 10
	}),
	useQueryPage({
		api: getUserTimeCardList,
		option: {
			responseKey:'data',
			totalKey:'total',
			params: {
				status: 1
			}
		},
		pageSize: 10
	})
]);
const tabIndex = ref(0);
const isLoad = ref(true);
const loading = ref(true);

watch(tabIndex,() => {
	if (cartList[tabIndex.value].list.length === 0) {
		loading.value = true;
		cartList[tabIndex.value].handleRefresh().finally(() => {
			loading.value = false;
		});
	}
})

const setTabIndex = (index: number) => {
	tabIndex.value = index;
	
};

const getData = (index: number) => {
	cartList[index].handleQueryPage();
};

onLoad(() => {
	cartList[0].handleRefresh().finally(() => {
		loading.value = false;
	});
});
onShow(() => {
	if (isLoad.value) {
		isLoad.value = false;
	} else {
		cartList[0].handleUpdate();
	}
});
onPullDownRefresh(() => {
	cartList[tabIndex.value].handleRefresh().finally(() => {
		uni.stopPullDownRefresh();
	});
});
</script>

<style lang="scss" scoped>
.tab {
	> view {
		height: 90rpx;
		line-height: 90rpx;
	}
	.tab-active {
		&::before {
			content: '';
			position: absolute;
			width: 46rpx;
			height: 6rpx;
			background: var(--color-primary);
			border-radius: 3rpx;
			bottom: 0;
			left: calc(50% - 23rpx);
		}
	}
}

.swiper {
	height: calc(100vh - 90rpx);
	scroll-view {
		height: 100%;
	}
	::v-deep {
		.goods-info2 {
			padding: 0 !important;
		}
	}
}
</style>